<template>
  <GlobalContainer className="!bg-[#fff]" :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`">
    <GlobalHeader title="公告内容" :fixed="true" showBack :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`" />
    <div class="rounded-20 min-h-[calc(100vh-128px)] bg-white p-32">
      <div class="title text-32 leading-48 mb-20 text-[#303133]">{{ detail.title }}</div>
      <div class="subline text-26 leading-40 mb-20 flex items-center font-normal text-[#909399]">
        <div>{{ detail.createTime }}</div>
        <div class="ml-auto">阅读 {{ detail.num || 0 }}</div>
      </div>
      <div class="content">
        <rich-text :nodes="content" />
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getNoticeDetail } from '@/common/api/common'

const OSS_URL = import.meta.env.VITE_OSS_URL
const content = ref(``)
const detail = ref({})
onLoad(options => {
  const id = options.id
  getDetailHandle(id)
})
const getDetailHandle = async id => {
  const res = await getNoticeDetail({ id: id })
  detail.value = res
  content.value = res.noticeContent.replace(/<img/gi, '<img style="width:100%;height:auto" ')
}
</script>

<style>
@import '@/styles/quill.bubble.wxss';
@import '@/styles/quill.core.wxss';
@import '@/styles/quill.snow.wxss';
</style>
